<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="template-choose-dialog" v-if="visible">
                <div class="template-choose-dialog__mask"></div>
                <div class="template-choose-dialog__content">
                    <div class="template-choose-dialog__close" v-if="closeBtn" @click="onClose">
                        <img :src="`${_oss_}images/icon-close.svg`" />
                    </div>

                    <div class="radio-container">
                        <RadioButtonGroupP line v-model="tabActive" :list="tabList" />

                        <div class="btn-confirm" @click="onConfirm">确认</div>
                    </div>

                    <div class="tamplate-list" v-loading="loading">
                        <div class="template-item" @click="onChecked(item.id)" v-for="item in list" :key="item.id">
                            <div class="template-img">
                                <div class="icon-select" v-if="template_id == item.id">
                                    <img :src="`${_oss_}images/icon-select.svg`" />
                                </div>

                                <img class="cover-image" :src="item.file + '?x-oss-process=image/resize,w_864/watermark,image_' +
                                    toBase64(
                                        'water/logo_white.png?x-oss-process=image/resize,P_30'
                                    ) +
                                    ',g_center,t_60'" />
                            </div>

                            <div class="template-info">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { GetTemplate } from "@/api";

const tabActive = ref(1);
const tabList = reactive([
    {
        label: "展示模版",
        value: 1
    },
    {
        label: "课件模版",
        value: 2
    },
]);
const template_id = ref(undefined);
const visible = ref(false);
const list = ref([]);
const loading = ref(false);
const closeBtn = ref(false);
const emits = defineEmits(['confirm']);

const onChecked = (value) => {
    template_id.value = value;
}

const onConfirm = () => {
    if (template_id.value) {
        emits('confirm', template_id.value);
        onClose();
    }
}

// 获取模版列表
const GetList = async () => {
    loading.value = true;
    const res = await GetTemplate({
        template_type_id: tabActive.value
    })
    loading.value = false;

    if (res.code == 200) {
        list.value = res.data;
    }
}

watch(tabActive, () => {
    GetList();
})

const onClose = () => {
    visible.value = false;
    tabActive.value = 1;
}



defineExpose({
    async open(id, closeVisible) {
        template_id.value = id;
        visible.value = true;
        closeBtn.value = closeVisible;
        GetList();
    }
})
</script>
<style lang="scss" scoped>
.template-choose-dialog {

    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1200px;
        height: 80vh;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        padding: 20px;

        .radio-container {
            display: flex;

            .btn-confirm {
                display: flex;
                align-items: center;
                justify-content: center;

                height: 30px;
                padding: 0 12px;
                background: #5085fb;
                color: #fff;
                border-radius: 4px;
                margin-left: auto;
                cursor: pointer;
                font-size: 14px;
            }
        }

        .tamplate-list {
            height: calc(100% - 40px);
            display: flex;
            flex-wrap: wrap;
            gap: 20px 10px;
            overflow: auto;
            margin-top: 10px;

            .template-item {
                width: 280px;
                border-radius: 10px;
                overflow: hidden;
                cursor: pointer;

                .template-img {
                    position: relative;
                    width: 100%;
                    height: 156px;

                    .icon-select {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(255, 255, 255, 0.5);

                        img {
                            width: 60px;
                            height: 60px;
                        }
                    }

                    .cover-image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .template-info {
                    width: 100%;
                    font-size: 18px;
                    font-weight: 500;
                    padding: 15px 0;
                    text-align: center;
                }
            }
        }
    }

    &__close {
        position: absolute;
        top: 0px;
        right: -40px;
        cursor: pointer;

        img {
            width: 30px;
            height: 30px;
        }
    }
}
</style>